<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Get method" @click="getInfo">
        <input type="button" value="Post method" @click="postInfo">
        <input type="button" value="Jsonp 请求" @click="jsonpInfo">
    </div>
    <script>
        var vm = new Vue(
            {
                el: '#app',
                data: {

                },
                methods: {
                    getInfo(){
                        this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
                            //通过result.body拿到服务器返回的成功的数据
                            console.log(result)
                        })
                    },
                    postInfo(){
                        //手动发起的post请求默认没有表单格式，有的服务器处理不了
                        //通过设置post方法第三个参数{emulateJSON: true}设置提交的内容类型为普通表单数据格式
                        //三个参数，第一个参数是url地址，第二个参数是提交的数据内容，第三个是提交的格式
                        this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
                            console.log(result.body)
                        })
                    },
                    jsonpInfo(){
                        this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
                            console.log(result.body)
                        })
                    }
                },
            }
        );
    </script>
</body>
</html>